<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../style/common.css" />
    <link rel="stylesheet" href="../style/index.css" />
  </head>
  <body>
    <div class="app">
      <div class="navigation disable-select">
        <nav></nav>
      </div>
      <div class="container">
        <ul>
          <li>
            <div class="form-con">
              <label for="rate">额定电流（RATE）</label>
              <select id="rate" name="rate">
                <option value="8">8</option>
                <option value="16">16</option>
                <option value="24">24</option>
                <option value="32">32</option>
                <option value="40">40</option>
                <option value="48">48</option>
              </select>
            </div>
          </li>
          <li>
            <div class="form-con">
              <label for="authFree">即插即充（ATUTH FREE）：</label>
              <span class="toggle-off">OFF</span>
              <div class="toggle-switch">
                <input type="checkbox" class="toggle-input" id="authFree" />
                <label for="authFree" class="toggle-label">
                  <span class="toggle-inner">
                    <span class="toggle-switch-track"></span>
                    <span class="toggle-switch-thumb"></span>
                  </span>
                </label>
              </div>
              <span class="toggle-on">ON</span>
            </div>
          </li>
          <li>
            <div class="form-con">
              <label for="btFree">蓝牙即插即充（BT FREE）</label>
              <span class="toggle-off">OFF</span>
              <div class="toggle-switch">
                <input type="checkbox" class="toggle-input" id="btFree" />
                <label for="btFree" class="toggle-label">
                  <span class="toggle-inner">
                    <span class="toggle-switch-track"></span>
                    <span class="toggle-switch-thumb"></span>
                  </span>
                </label>
              </div>
              <span class="toggle-on">ON</span>
            </div>
          </li>
          <li>
            <div class="form-con">
              <label for="peEnable">接地检测（PE ENABLE）：</label>
              <span class="toggle-off">OFF</span>
              <div class="toggle-switch">
                <input type="checkbox" class="toggle-input" id="peEnable" />
                <label for="peEnable" class="toggle-label">
                  <span class="toggle-inner">
                    <span class="toggle-switch-track"></span>
                    <span class="toggle-switch-thumb"></span>
                  </span>
                </label>
              </div>
              <span class="toggle-on">ON</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    // 加载菜单栏
    const lists = [
      {
        name: "系统运行信息",
        href: "http://127.0.0.1:5501/index.html",
      },
      {
        name: "功能配置",
        href: "http://127.0.0.1:5501/views/fun-config.html",
        active: true,
      },
      {
        name: "WIFI配置",
        href: "http://127.0.0.1:5501/views/wifi-config.html",
      },
      {
        name: "WALLBOX控制",
        href: "http://127.0.0.1:5501/views/wall-box.html",
      },
      { name: "OTA", href: "http://127.0.0.1:5501/views/ota.html" },
    ];
    lists.forEach((item) => {
      const a = document.createElement("a");
      a.target = "_self";
      a.href = item.href;
      a.innerText = item.name;
      if (item.active) {
        a.classList.add("active");
      }
      document.querySelector("nav").appendChild(a);
    });
    // 加载菜单栏

    document.getElementById("rate").addEventListener("change", (e) => {
      console.log(e.target.value);
    });
    document.getElementById("authFree").addEventListener("change", (e) => {
      console.log(e.target.checked);
    });
    document.getElementById("btFree").addEventListener("change", (e) => {
      console.log(e.target.checked);
    });
    document.getElementById("peEnable").addEventListener("change", (e) => {
      console.log(e.target.checked);
    });
  </script>
</html>
